<template>
    <div>
    <div class="mould_221" style="padding-bottom:20px">
          <div class="square_goods">
            <div class="header clearfix pl10 pr10" style="background:transparent">
              <div class="header_tit ft16 bold c333 rela fl mt10">猜你喜欢</div>
              <div class="menu">
                <div class="fixed_box_js w100 rela" style="height:45px;">
                  <div class="w100">
                    <div class="fulllist" style="height: 45px; line-height: 45px; width: 100%;">
                      <ul class="fullnav"></ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="stairs_tab pr10 pb10" style="min-height: 200px;" >
              <div class="clearfix"  >
                <div class="fl tabli pl10" >
                  <div class="bgfff round5 rela mt10"  v-for="(item,index) in imgList1"  :key="index">
                    <div v-if="index%2==0">
                      <router-link tag="div" :to="'/goods/' + item.gid" class="pad5 rela">
                        <img  :src="item.img.img_url" class="goodimg db w100">
                        <div class="da_sale abs w100">
                          <div class="ft10 sale_label w100"></div>
                        </div>
                      </router-link>
                      <div class="pl10 pr10">
                        <div class="ft12 c333 mt5 title ell">{{item.title}}</div>
                        <div class="manual ell">
                          <div class="ft10 dib c666 rela border pl5 pr5 properties mx119">
                            <span class="ell">
                                {{item.goods_properties[0]}}
                              <i v-if="item.goods_properties[0]">|</i>
                            </span>
                              <span class="ell">
                                {{item.goods_properties[1]}}
                              <i v-if="item.goods_properties[1]">|</i>
                              </span>
                              <span class="ell">
                                {{item.goods_properties[2]}}
                            </span>
                          </div>
                        </div>
                        <div class="clearfix ft10 tags_label mt3"></div>
                        <div class="rela pb5">
                          <div class="flex flex-ac mt5">
                            <span class="ft12 cf0 bold">￥</span>
                            <span class="ft14 bold cf0">{{item.normal_price.price}}</span>
                            <span v-if="item.normal_price.tag_content" class="fl ft10 cfff ftc price_label_yellow">{{item.normal_price.tag_content}}</span>
                            <span class="ft12 c999 bold abs select_love">...</span>
                          </div>
                        </div>
                        <div class="subscribe pb5">
                          <div class=" flex flex-ac ">
                            <span class="ft12 c333 bold">￥</span>
                            <span class="ft14 bold c333">{{item.normal_price.market_price}}</span>
                            <div class="ml5">
                              <img src="" class="subscribe_img">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="rankbox rela" v-if="index%2==0">
                      <a class="db">
                        <div v-if="item.rank_detail.bg_img">
                          <img  src="https://img2.epetbar.com/nowater/2019-12/24/15/f21e0cf044f2fc066ba22850b59a6c3a.png" class="w100">
                        </div>
                        <div class="abs rankfont w100 ftc">
                          <div class="flex flex-ac flex-pc">
                            <img src="https://img2.epetbar.com/nowater/2019-12/24/16/441af4aaab5be5a2ef56822c060c804d.png" class="rankico">
                            <span class="c333 ft13 ml5 mr5 bold ell rank_message">{{item.rank_detail.message}}</span>
                            <img src="" class="arrowico">
                          </div>
                        </div>
                      </a>
                    </div>
                    <div class="nolove abs flex flex-ac flex-pc opc0">
                        <div class="ftc">
                            <img src="" class="nolike db">
                            <div class="cfff ftc ft13"></div>
                        </div>
                    </div>
                  </div>
                </div>
                <div class="fl tabli pl10" >
                    <div class="bgfff round5 rela mt10"  v-for="(item,index) in imgList1"  :key="index">
                    <div v-if="index%2==1">
                      <router-link tag="div" :to="'/goods/' + item.gid" class="pad5 rela">
                        <img  :src="item.img.img_url" class="goodimg db w100">
                        <div class="da_sale abs w100">
                          <div class="ft10 sale_label w100"></div>
                        </div>
                      </router-link>
                      <div class="pl10 pr10">
                        <div class="ft12 c333 mt5 title ell">{{item.title}}</div>
                        <div class="manual ell">
                          <div class="ft10 dib c666 rela border pl5 pr5 properties mx119">
                            <span class="ell">
                                {{item.goods_properties[0]}}
                              <i v-if="item.goods_properties[0]">|</i>
                            </span>
                              <span class="ell">
                                {{item.goods_properties[1]}}
                              <i v-if="item.goods_properties[1]">|</i>
                              </span>
                              <span class="ell">
                                {{item.goods_properties[2]}}
                            </span>
                          </div>
                        </div>
                        <div class="clearfix ft10 tags_label mt3"></div>
                        <div class="rela pb5">
                          <div class="flex flex-ac mt5">
                            <span class="ft12 cf0 bold">￥</span>
                            <span class="ft14 bold cf0">{{item.normal_price.price}}</span>
                            <span v-if="item.normal_price.tag_content" class="fl ft10 cfff ftc price_label_yellow">{{item.normal_price.tag_content}}</span>
                            <span class="ft12 c999 bold abs select_love">...</span>
                          </div>
                        </div>
                        <div class="subscribe pb5">
                          <div class=" flex flex-ac ">
                            <span class="ft12 c333 bold">￥</span>
                            <span class="ft14 bold c333">{{item.normal_price.market_price}}</span>
                            <div class="ml5">
                              <img src="" class="subscribe_img">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="rankbox rela" v-if="index%2==1">
                      <a class="db">
                        <div >
                          <img v-if="item.rank_detail.message" src="https://img2.epetbar.com/nowater/2019-12/24/15/f21e0cf044f2fc066ba22850b59a6c3a.png" class="w100">
                        </div>
                        <div class="abs rankfont w100 ftc">
                          <div class="flex flex-ac flex-pc">
                            <img src="https://img2.epetbar.com/nowater/2019-12/24/16/441af4aaab5be5a2ef56822c060c804d.png" class="rankico">
                            <span class="c333 ft13 ml5 mr5 bold ell rank_message">{{item.rank_detail.message}}</span>
                            <img src="" class="arrowico">
                          </div>
                        </div>
                      </a>
                    </div>
                    <div class="nolove abs flex flex-ac flex-pc opc0">
                        <div class="ftc">
                            <img src="" class="nolike db">
                            <div class="cfff ftc ft13"></div>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
            
        </div>
    
    
    
</template>
<script>
import data from '@/assets/static/data.js'
import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);

// 注册时可以配置额外的选项
Vue.use(Lazyload, {
  lazyComponent: true,
});
export default {
    data() {
    return {
      data,
      imgList1: [],
     
    };
  },
    mounted() {
    
    this.imgList1 = data.datas.list.find((v)=>v.index ==5733 ).data.list;
    //  console.log(result.datas.list.find((v)=>v.index ==5733 ).data.list);
    
  },
}
</script>
<style lang="stylus" scoped>
.pl10 {
    padding-left: 0.1rem;
}
.pr10 {
    padding-right: 0.1rem;
    
}
.header_tit {
    width: 0.75rem;
}
.c333 {
    color: #333;
}
.rela {
    position: relative;
}
.ft16 {
    font-size: 0.16rem;
}
.mt10 {
    margin-top: 0.1rem;
}
.fl, .pull-left {
    float: left;
}
.bold {
    font-weight: 700;
}
.menu {
    margin-left: 0.75rem;
}
.w100 {
    width: 100%;
}
.fullnav {
    width: 100%;
    height: 100%;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
}
.pb10 {
    padding-bottom: 0.1rem;
}
.pr, .pr10 {
    padding-right: 0.1rem;
}
.tabli {
    width: 50%;
}
.round5 {
    border-radius: 0.05rem;
}
.bgfff {
    background: #fff;
}
.pad5 {
    padding: 0.05rem;
}
.goodimg {
    min-height: 0.8rem;
}
.block, .db {
    display: block;
}
.da_sale {
    bottom: 0;
    left: 0;
}
.abs {
    position: absolute;
}
.sale_label {
    border-radius: 0 0.05rem 0 0;
    padding: 0.03rem;
}
.ft10 {
    font-size: 0.12rem;
    -webkit-transform-origin-x: 0;
   
}

.ell {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.c333 {
    color: #333;
}
.ft12 {
    font-size: 0.12rem;
}
.mt5 {
    margin-top: 0.05rem;
}
.mx119{
    max-width: 118%;
}
.border {
    position: relative;
}
.c666 {
    color: #666;
}
.dib {
    display: inline-block;
}
.pl5 {
    padding-left: 0.05rem;
}
.pr5 {
    padding-right: 0.05rem;
}
.tags_label {
    width: 119%;
}
.mt3 {
    margin-top: 0.03rem;
}
.pb5 {
    padding-bottom: 0.05rem;
}
.flex-ac {
    -webkit-box-align: center;
    align-items: center;
}
.flex
    display flex
.cf0 {
    color: #ff5757;
}
.ft12 {
    font-size: 0.12rem;
}
.ft14 {
    font-size: 0.14rem;
}
.price_label_yellow {
    background: url(http://static.epetbar.com/epet_wap_img/index/textbg1.png) no-repeat;
    min-width: 0.5rem;
    background-size: 100% 100%;
    margin-left: 0.02rem;
    padding-left: 0.03rem;
    height: 0.16rem;
    line-height: 0.16rem;
    text-align: center;
}
.afff, .cfff {
    color: #fff;
}
.select_love{
    top: 0;
    right: 0;
    z-index: 1;
}
.c999 {
    color: #999;
}
.subscribe {
    margin-top: -0.05rem;
}
.ml5 {
    margin-left: 0.05rem;
}
.subscribe_img {
    height: 0.12rem;
    vertical-align: 0rem;
}
.rankfont {
    top: 0.1rem;
    left: 0;
}
.ftc {
    text-align: center;
}
.rankfont .rankico {
    height: 0.13rem;
}
.rank_message {
    max-width: 70%;
}
.ft13 {
    font-size: 0.13rem;
}
.ml5 {
    margin-left: 0.05rem;
}
.mr5 {
    margin-right: 0.05rem;
}

</style>